<script setup>
import { reactive, ref, toRaw, watch } from 'vue'
import { modifyCategory, queryCategoryParentName } from '@/service/category.js'
import PlusIcon from '@/components/icons/PlusIcon.vue'
import { upload } from '@/service/file.js'
import { ElNotification } from 'element-plus'
const emits = defineEmits(['closeDialog', 'finishEditAction'])
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
  row: {
    required: true,
  },
})
const showDialog = ref(false)

let form = reactive({
  name: null,
  parentId: -1,
  level: 1,
  icon: null,
  status: 1,
  sort: 0,
  id: -1,
  parentName: '',
})

watch(
  () => props.visible,
  async (val) => {
    showDialog.value = val
    form.name = props.row.name
    form.parentId = props.row.parentId
    if (form.parentId === -1) {
      form.parentName = '顶级分类'
    } else {
      const res = await queryCategoryParentName(form.parentId)
      form.parentName = res.data
    }
    form.icon = props.row.imageUrl
    form.status = props.row.status
    form.sort = props.row.sort
    form.id = props.row.id
    form.level = props.row.level
  }
)
const rules = reactive({
  name: [{ required: true, message: '分类名称不可为空！', trigger: 'blur' }],
  icon: [
    {
      required: () => form.level === 3, // 仅三级分类时必填
      message: '三级分类必须上传图片！',
      trigger: 'blur',
    },
  ],
})
const fileInput = ref()

function openFileSelector() {
  fileInput.value.click()
}
async function handleFileSelect(event) {
  const selectedFile = event.target.files[0]
  const res = await upload(selectedFile)
  form.icon = res.data
}
const dialog = ref()
function onTapSaveCategoryButton() {
  dialog.value.validate(async (valid) => {
    if (valid) {
      await modifyCategory(toRaw(form))
      ElNotification({
        title: '提示',
        message: '更新成功！',
        type: 'success',
      })
      emits('finishEditAction')
    }
  })
}
</script>

<template>
  <el-dialog width="500px" draggable v-model="showDialog" title="编辑商品分类" @close="emits('closeDialog')">
    <el-form ref="dialog" :model="form" label-position="right" label-width="auto" :rules="rules">
      <el-form-item label="分类名称:" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="上级分类:">
        <el-input v-model="form.parentName" disabled />
      </el-form-item>

      <el-form-item v-if="form.level === 3" label="分类图片:" prop="icon">
        <div class="form-image" @click="openFileSelector">
          <img v-if="form.icon" :src="form.icon" alt="" style="width: 100%; height: 100%" />
          <el-icon v-else size="35">
            <PlusIcon />
          </el-icon>
          <input
            type="file"
            ref="fileInput"
            class="hidden-file-input"
            @change="handleFileSelect"
            accept="image/*"
            style="display: none"
          />
        </div>
      </el-form-item>

      <el-form-item label="状态:">
        <el-radio-group v-model="form.status">
          <el-radio :value="1">启用</el-radio>
          <el-radio :value="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序:">
        <el-input-number v-model="form.sort" :min="1" :max="100" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="emits('closeDialog')">取消</el-button>
        <el-button type="primary" @click="onTapSaveCategoryButton">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.form-image {
  width: 100px;
  height: 100px;
  border: 1px dashed gray;
  color: gray;
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover {
    border: 1px dashed #409eff;
    color: #409eff;
    cursor: pointer;
  }
}
</style>
